<template>
  <div class="player-container">
    <!-- 左侧播放区 -->
    <div class="left-section">

      <!-- 视频标题 -->
      <div class="video-title">
        <h2>决斗光玛镇 <el-tag type="danger" size="small">正片</el-tag></h2>
      </div>

      <!-- 视频播放器 -->
      <div class="video-wrapper">
        <BasicPlayer/>
      </div>

      <!-- 视频信息 -->
      <div class="video-info">
        <h3>决斗光玛镇</h3>
        <div class="tags">
          <span class ="tag">美国</span>
          <span class="tag">2013</span>
<!--          <span v-for="(tag, index) in movieInfo.tags" :key="index" class="tag">{{ tag }}</span>-->
        </div>
      </div>

    </div>

    <!-- 右侧选集区 -->
    <div class="right-section">
      <!-- 播放源切换 -->
      <div class="source-switch">
        <el-button-group>
          <el-button
            :type="activeSource === 'xlm3u8' ? 'primary' : ''"
            @click="switchSource('xlm3u8')"
          >
            XLM3U8
          </el-button>
          <el-button
            :type="activeSource === 'xlyun' ? 'primary' : ''"
            @click="switchSource('xlyun')"
          >
            XLYun
          </el-button>
        </el-button-group>
      </div>

      <!-- 剧集列表 -->
      <el-scrollbar class="episode-list">
        <div
          v-for="(episode, index) in filteredEpisodes"
          :key="index"
          class="episode-item"
          :class="{ 'active': activeEpisode === index }"
          @click="playEpisode(index)"
        >
          第{{ index + 1 }}集
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import BasicPlayer from "@/views/video/BasicPlayer.vue";

// 数据源
const activeSource = ref('xlm3u8')
const activeEpisode = ref(0)
const episodes = ref({
  xlm3u8: [
    { url: 'source1.m3u8', title: '第1集' },
    { url: 'source2.m3u8', title: '第2集' }
  ],
  xlyun: [
    { url: 'source1.xlyun', title: '第1集' },
    { url: 'source2.xlyun', title: '第2集' }
  ]
})

// 计算属性
const filteredEpisodes = computed(() => {
  return episodes.value[activeSource.value]
})

// 方法
const switchSource = (source) => {
  activeSource.value = source
  activeEpisode.value = 0
  updateVideoSource()
}

const playEpisode = (index) => {
  activeEpisode.value = index
  updateVideoSource()
}

const updateVideoSource = () => {
  playerOptions.value.sources[0].src =
    episodes.value[activeSource.value][activeEpisode.value].url
}
</script>

<style scoped lang="scss">
.player-container {
  display: flex;
  height: 100vh;
  background: #000;
  color: #fff;
  padding: 20px;

  .left-section {
    flex: 1;
    margin-right: 20px;

    .video-title {
      margin-bottom: 15px;
      h2 {
        color: #fff;
        margin: 0;
        display: flex;
        align-items: center;
        .el-tag {
          margin-left: 10px;
        }
      }
    }

    .video-wrapper {
      background: #000;
      border-radius: 4px;
      overflow: hidden;
      width: 100%;
    }

    .video-info {
      margin-top: 10px;

      h3 {
        margin: 0 0 5px;
      }

      .tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;

        .tag {
          background-color: #2a2a2a;
          padding: 5px 10px;
          border-radius: 4px;
        }
      }
    }


  }

  .right-section {
    width: 300px;
    background: #1a1a1a;
    border-radius: 4px;
    padding: 15px;

    .source-switch {
      margin-bottom: 15px;
      .el-button-group {
        width: 100%;
        .el-button {
          width: 50%;
        }
      }
    }

    .episode-list {
      height: calc(100vh - 180px);
      .episode-item {
        padding: 12px;
        margin-bottom: 8px;
        background: #2a2a2a;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          background: #3a3a3a;
        }
        &.active {
          background: var(--el-color-primary);
          color: #fff;
        }
      }
    }
  }
}
</style>
